// 引入主题
import ThemeContext from "@/utils/theme";
class ChildA extends React.PureComponent {
  render() {
    return (
      <div style={this.context}>
        <h2>A组件</h2>
      </div>
    );
  }
}
ChildA.contextType = ThemeContext;

import { ThemeConsumer } from "@/utils/theme";
class ChildB extends React.PureComponent {
  render() {
    return (
      <ThemeConsumer>
        {(theme) => {
          return (
            <div style={theme}>
              <h2>B组件</h2>
            </div>
          );
        }}
      </ThemeConsumer>
    );
  }
}

const ChildC = (props) => {
  return (
    <ThemeConsumer>
      {(theme) => {
        return (
          <div style={theme}>
            <h2>C组件</h2>
          </div>
        );
      }}
    </ThemeConsumer>
  );
};

export default class StudyContext extends React.PureComponent {
  render() {
    return (
      <div>
        <h2>学习上下文</h2>
        <ChildA />
        <ChildB />
        <ChildC />
      </div>
    );
  }
}
